<template>
  <div :class="styles.test">SassTest
    <div
      :class="styles.div1">
      1
      <div :class="styles.div2">
        2
        <div :class="styles.div3">
          3
          <h1>1</h1>
          <h2>2</h2>
          <h3>3</h3>
          <div :class="styles.div4">
            4
            <div :class="styles.div5">
              5
              <div :class="styles.div6">
                6
                <div :class="styles.div7">
                  7
                  <div :class="styles.div8">
                    8
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    ----------------<br>
    <div :class="styles.test1">
      test >只针对下一级的所有元素
      <div>第1-1个子元素
        <div>第2-1个子元素</div>
        <div>第2-2个子元素</div>
      </div>
      <div>第1-2个子元素</div>
    </div>

    <div :class="styles.test2">
      test + 只针对同级的div3
      <div>第1-1个子元素
        <div>第2-1个子元素</div>
        <div>第2-2个子元素</div>
      </div>
      <div>第1-2个子元素</div>
    </div>

    <div :class="styles.test3">
      test ~ 针对同层后面所有元素
      <div>第1-1个子元素
        <div>第2-1个子元素</div>
        <div>
          第2-2个子元素
          <div>第3-1个子元素</div>
        </div>
      </div>
      <div>第1-2个子元素</div>
    </div>

    <div>4</div>
    <p>p</p>
    <div>5</div>
    <p>p</p>
    <div>6</div>
    <p>p</p>
    <div>7</div>
    <p>p</p>
    <div>8</div>

    <p :class="styles.test4">嵌套属性的规则是这样的：把属性名从中划线-的地方断开</p>

  </div>
</template>

<script>
  import styles from './SassTest.scss'

  export default {
    name: "SassTest",
    model: {},
    props: {},
    data() {
      return {
        styles
      }
    },
    computed: {},
    beforeCreate: function () {

    },
    created: function () {

    },
    beforeMount: function () {

    },
    mounted: function () {
    },
    updated: function () {

    },
    activated: function () {

    },
    deactivated: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {}
  }
</script>

<style src="./SassTest.scss">

</style>
